<template>
  <div
    ref="el"
    class="w-full flex flex-col justify-center items-center aspect-square"
  >
    <!-- 图片 -->
    <div
      class="aspect-square rounded-xl overflow-hidden flex items-center justify-center w-2/5 hover:scale-95 anim hover:cursor-pointer"
    >
      <UniCosImage
        :src="url ?? API.DEFAULT_COS_IMAGE_URL"
        :format="CosImgFormatSuffix.WEBP"
        class="w-h-full"
      ></UniCosImage>
    </div>
    <div class="w-2/3 text-center m-2">
      <!-- 用户名 -->
      <div
        class="font-bold text-lg opacity-80 text-ellipsis overflow-hidden whitespace-nowrap"
      >
        {{ name }}
      </div>
      <!-- 签名 -->
      <div
        class="font-bold text-xs opacity-30 text-ellipsis overflow-hidden whitespace-nowrap italic"
      >
        {{ signature }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { API } from "~/models/api";
import { CosImgFormatSuffix } from "~/models/cos";

const el = ref(null);
defineProps(["name", "signature", "url"]);
</script>

<style lang="scss" scoped></style>
